import React, { Component } from 'react'
//1.引入ant标签
import { Tabs, Badge, Toast } from 'antd-mobile'

//3.引入商品分类和轮播图请求接口
import { reqgetcate, reqgetcatesecond } from '../../http/api'


//4.引入header头部组件
import Header from '../../components/Header/Header'

//5.引入自己的样式
import './Cate.less'
//9.引入判断环境 渲染图片
import { $pre } from '../../http/http'

//10.引入ant框架
import { Empty } from 'antd-mobile'


export default class Cate extends Component {


    constructor() {
        super()
        this.state = {
            //初始化数据
            //商品分类标题列表
            cate: [],
            //二级分类列表
            secondCate: [],
            //初始化n 添加active类名
            n: 0
        }
    }

    //一进来页面就发送请求
    componentDidMount() {
        //1.发送获取商品分类请求 渲染一级标题
        reqgetcate().then(res => {
            this.setState({
                cate: res.data.list?res.data.list :[]
            },()=>{
                this.getsecond(this.state.cate[0].id,0)
            })
        })
    }

    //点击左侧一级分类请求展示二级分类
    async getsecond(id, index) {
        let res = await reqgetcatesecond({ fid: id })
        if (res.data.code == 200) {
            Toast.show({
                content: res.data.msg,
            })
            this.setState({
                secondCate: res.data.list ? res.data.list : []
            })
            console.log(this.state.secondCate);
        }
        //点击的下标和n的值相同,如果相同就添加类名active
        this.state.n = index
    }

    render() {
        let { cate, secondCate, n } = this.state
        return (
            <div className='Cate app'>
                <Header title='商品分类'></Header>
                <div className='side'>
                    <div className="bgg">
                        <ul>
                            {cate.map((item, index) => {
                                return (
                                    <li key={item.id} onClick={() => this.getsecond(item.id, index)} className={index == n ? 'active' : ''}>{item.catename}</li>
                                )
                            })}
                        </ul>
                        <div className="right">
                            {/* <!-- 某一个 --> */}
                            {secondCate.length > 0 ? (<div>
                                {secondCate.map(item => {
                                    return (<div className="item" key={item.id}>
                                        <h3>{item.goodsname}</h3>
                                        <div className="shop">
                                            <div className="shopitem">
                                                <img src={$pre + item.img} alt='' />
                                                <h3 className="title">￥{item.price}</h3>
                                                <h4 >￥{item.market_price}</h4>
                                            </div>
                                        </div>
                                    </div>)
                                })}
                            </div>) : (<Empty description='请选择分类' />)}

                        </div>
                    </div>
                </div>
            </div>
        )
    }
}
